@import '~iview/src/styles/color/colors.less';
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-danger {
  color: @red-6 !important;
}
.text-success {
  color: @green-6 !important;
}
.text-info {
  color: @blue-6 !important;
}
.text-warning {
  color: @gold-6 !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.d-none {
  display: none !important;
}
.d-inline-block {
  display: inline-block !important;
}
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}
.ml-10 {
  margin-left: 10px !important;
}
.ml-15 {
  margin-left: 15px !important;
}
.ml-20 {
  margin-left: 20px !important;
}
.mr-5 {
  margin-right: 5px !important;
}
.mr-10 {
  margin-right: 10px !important;
}
.mr-15 {
  margin-right: 15px !important;
}
.mr-20 {
  margin-right: 20px !important;
}
.mt-5 {
  margin-top: 5px !important;
}
.mt-10 {
  margin-top: 10px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-25 {
  margin-bottom: 25px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pr-10 {
  padding-right: 10px !important;
}
.pr-15 {
  padding-right: 15px !important;
}
.pr-20 {
  padding-right: 20px !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}
.pl-5 {
  padding-left: 5px !important;
}
.pl-10 {
  padding-left: 10px !important;
}
.pl-15 {
  padding-left: 15px !important;
}
.pl-20 {
  padding-left: 20px !important;
}
.line-field {
  margin-bottom: 10px;
  padding: 15px;
  border: none;
  border-top: 1px solid #bbb;
  legend {
    margin-left: 20px;
    padding: 0 10px;
    font-size: 20px;
    font-weight: 300;
  }
}
/**
 * keyframes 动画规则
 * @param：动画名，动画内容
 */
.keyframes (@name, @frames) {
  @-webkit-keyframes @name {
    @frames();
  }
  @-moz-keyframes @name {
    @frames();
  }
  @-ms-keyframes @name {
    @frames();
  }
  @-o-keyframes @name {
    @frames();
  }
  @keyframes @name {
    @frames();
  }
}
//.keyframes (ant-progress-active-v, { from {
//  opacity: .1;
//  height: 0
//} 20% {
//    opacity: .5;
//    height: 0
//  } to {
//      opacity: 0;
//      height: 100%
//    } });
//
//.keyframes (ant-progress-active-h, { from {
//  opacity: .1;
//  width: 0
//} 20% {
//    opacity: .5;
//    width: 0
//  } to {
//      opacity: 0;
//      width: 100%
//    } });
/**
 * animation，所有动画属性的简写属性，除了 animation-play-state 属性
 * @param：调用的动画名，动画持续时间，动画速度曲线，动画延迟时间（多久后开始执行动画），动画播放次数，动画是否在下一周期逆向地播放，对象动画时间之外的状态（对象在动画结束后的位置）
 */
.animation(@animation-name, @animation-duration, @animation-timing-function, @animation-delay, @animation-iteration-count, @animation-direction, @animation-fill-mode) {
  -webkit-animation: @arguments;
  -moz-animation: @arguments;
  -ms-animation: @arguments;
  -o-animation: @arguments;
  animation: @arguments;
}
/**
 * transition，所有过渡属性的简写属性
 * @param：CSS属性名，持续时间，动画速度曲线，速度曲线，延迟时间
 */
.transition(@transition-property, @transition-duration, @transition-timing-function, @transition-delay) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}
/**
 * transform，2D 或 3D 转换
 * @param：none | transform-functions
 */
.transform(@transform-functions) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -ms-transform: @arguments;
  -o-transform: @arguments;
  transform: @arguments;
}
//// 垂直滚动条动画
//.__rail-is-vertical {
//  & > .__bar-is-vertical {
//    &:before {
//      content: "";
//      opacity: 0;
//      position: absolute;
//      top: 0;
//      left: 0;
//      right: 0;
//      bottom: 0;
//      background: #fff;
//      border-radius: 8px;
//      .animation(ant-progress-active-v, 3s, cubic-bezier(.23, 1, .32, 1), 0s, infinite, normal, forwards);
//    }
//  }
//}
//
//// 水平滚动条动画
//.__rail-is-horizontal {
//  & > .__bar-is-horizontal {
//    &:before {
//      content: "";
//      opacity: 0;
//      position: absolute;
//      top: 0;
//      left: 0;
//      right: 0;
//      bottom: 0;
//      background: #fff;
//      border-radius: 8px;
//      .animation(ant-progress-active-h, 3s, cubic-bezier(.23, 1, .32, 1), 0s, infinite, normal, forwards);
//    }
//  }
//}
///* 滚动条整体部分 */
//::-webkit-scrollbar {
//  // 高宽分别对应横竖滚动条的尺寸
//  width: 15px;
//  height: 15px;
//  border-radius: 15px;
//  background: #e8eaec;
//}
//
///* 滚动条里面小方块，可以拖动的部分 */
//::-webkit-scrollbar-thumb {
//  background: rgba(45, 140, 240, 0.8);
//  border-radius: 15px;
//}
//
///* 滚动条里面轨道（里面装有Thumb） */
//::-webkit-scrollbar-track {
//  display: none;
//}

.spin-icon-load{
  .animation(ani-spin, 1s, linear, 0s, infinite, normal, forwards);
}
.keyframes (ani-spin, {
  0% {
    .transform(rotate(0deg));
  }
  50% {
    .transform(rotate(180deg));
  }
  100% {
    .transform(rotate(360deg));
  }
});

.ivu-layout {
  .header-con.ivu-layout-header {
    height: 54px;
    line-height: 54px;
  }
}

.top-toolbar {
  .ivu-input-wrapper {
    .ivu-input-group-prepend {
      background: #fdfdfd;
    }
  }
}

.small-table {
  .ivu-table {
    .ivu-table-cell {
      padding: 5px 5px;
    }
  }
}
